<template>
	<div>
		<a-modal
			:title="title"
			:visible="visible"
			:confirmLoading="confirmLoading"
			:width="width"
			@ok="handleOk"
			@cancel="handleCancel"
		>
			<a-spin :spinning="spinning">
				<a-form :form="form">
					<div style="width: 100%; margin-left: 8%; padding-bottom: 10px" v-if="supportWehcat">
						<input v-model="url" class="artileInput" placeholder="请复制您的公众号的文章链接地址到此然后点击 按钮" />
						<a-button type="primary" style="margin-left: 5px" size="small" @click="article(1)"> 公众号同步</a-button>
						<a-button type="primary" style="margin-left: 5px" size="small" @click="reSetUrl">重置地址</a-button>
					</div>

					<div style="width: 100%; margin-left: 8%; padding-bottom: 10px" v-if="supportTops">
						<input
							v-model="topUrl"
							class="artileInput"
							placeholder="请复制您的头条的文章链接地址到此然后点击 按钮,如同步失败 多试几次或者设置 cookie"
						/>
						<a-button type="primary" style="margin-left: 5px" size="small" @click="article(2)">头 条 同 步</a-button>
						<a-button type="primary" style="margin-left: 5px" size="small" @click="reSetCookie">重置cookie</a-button>
					</div>

					<div style="width: 100%; margin-left: 8%">
						<input
							v-model="cookies"
							style="width: 84%"
							v-show="topUrl && !isSetOk"
							placeholder="如果同步失败 请打开浏览器F12 复制您的头条 cookie 到此处后点击 cookie 设置 后再同步 或多试几次 "
						/>
						<a-button
							v-show="topUrl && !isSetOk"
							type="primary"
							style="margin-left: 5px"
							size="small"
							@click="setTopCookie"
							>cookie 设置</a-button
						>
					</div>

					<dynamic-forms ref="dynamicForms" :form="form" @submit="submit"></dynamic-forms>
				</a-form>
			</a-spin>
		</a-modal>
	</div>
</template>
<script>
import DynamicForms from './DynamicForm.vue'
// import jsonp from 'fetch-jsonp'
import storage from 'store'
import { wechatArticle } from '@/api/site/content'
export default {
	components: {
		DynamicForms,
	},
	props: {
		width: {
			type: String,
			default: '70%',
			required: false,
		},
		title: {
			type: String,
			default: '表单管理',
			required: false,
		},
	},
	data() {
		return {
			form: this.$form.createForm(this),
			visible: false,
			spinning: false,
			modelId: null,
			cookies: null,
			isSetOk: false,
			url: null,
			topUrl: null,
			supportWehcat: false,
			supportTops: false,
			confirmLoading: false,
		}
	},
	created() {
		const cookie = storage.get('TOP_COOKIE')
		if (cookie) {
			this.cookies = cookie
			this.isSetOk = true
		}
	},
	methods: {
		initForm(models) {
			// console.log(models)
			const _this = this
			this.spinning = true
			this.openModal()
			if (models) {
				setTimeout(() => {
					_this.$refs.dynamicForms.setFields(models)
				}, 300)
			}
			setTimeout(() => {
				_this.spinning = false
			}, 300)
		},
		setModelId(modelId) {
			this.modelId = modelId
		},
		setSupportTops(val) {
			this.supportTops = val
		},
		setSupportWehcat(val) {
			this.supportWehcat = val
		},
		openModal() {
			this.visible = true
		},
		submit(data) {
			this.$emit('submit', data)
		},
		setTopCookie() {
			if (this.cookies) {
				storage.set('TOP_COOKIE', this.cookies)
				this.isSetOk = true
				this.$message.info('设置成功!')
			} else {
				this.$message.error('请输入cookie')
			}
		},
		handleOk(e) {
			this.$refs.dynamicForms.submitFrom()
		},
		article(type) {
			const aurl = type === 1 ? this.url : this.topUrl
			const _this = this
			if (aurl) {
				this.spinning = true
				wechatArticle({ url: aurl, modelId: this.modelId, type: type, cookie: this.cookies }).then((response) => {
					this.initForm(response.res.models)
					this.spinning = false
				})
				setTimeout(() => {
					_this.spinning = false
				}, 20000)
			}
		},
		reSetCookie() {
			this.isSetOk = false
		},
		reSetUrl() {
			this.url = null
			this.topUrl = null
		},
		handleCancel(e) {
			const _this = this
			this.$emit('beforeClose')
			setTimeout(() => {
				_this.visible = false
			}, 150)
			this.reSetUrl()
			this.$emit('close')
		},
		cleanForm() {
			this.$refs.dynamicForms.resetFieldsClear(true)
		},
	},
}
</script>
<style>
.artileInput {
	width: 77%;
	border-radius: 3px;
	border: 1px solid #cacaca;
	height: 30px;
}
</style>
